<template>
    <div class="box">
        <header class="header">
            <van-nav-bar
            right-text="搜索"
            left-arrow
            @click-left="goBack"
            @click-right="onSearch"
            >
             <van-search
                v-model="value"
                slot="title"
                placeholder="请输入搜索关键词"
                @search="onSearch"
            />
            </van-nav-bar>
        </header>
        <div content>搜索内容</div>
    </div>    
</template>
<script>
import Vue from 'vue'
import { Search,NavBar  } from 'vant'

Vue.use(Search)
Vue.use(NavBar)
export default {
    data () {
        return {
            value:''
        }
    },
    methods: {
        // 搜索函数
      onSearch () {
          console.log('搜索')
      },
      // 返回上一页
      goBack () {
          this.$router.go(-1)
      }
    }
}
</script>
<style lang='scss' scoped>
.van-nav-bar__title {
    max-width: 80%;
}
.van-search{
    width: 100%;
    padding: 5px 12px;
}
</style>
